<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>守护云</title>
    <meta name="description" content="守护云">
    <meta name="keywords" content="守护云">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../plugins/elementui/index.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/axios-0.18.0.js"></script>

    <!--<script src="//unpkg.com/vue/dist/vue.js"></script>-->
    <!--<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"/>-->
</head>
<body class="hold-transition">
<div id="app">
    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
                v-model="value1"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
        </el-date-picker>
    </div>
</div>
</body>

<script type="application/javascript">
    var vue = new Vue({
        el: '#app',
        data(){

            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''}

        }
    })
</script>
</html>
